<script setup lang="ts">
import F_banner from "@/components/web/f_banner.vue";
import {useRouter, useRoute} from "vue-router";
import F_ai_role_create from "@/components/common/f_ai_role_create.vue";
import {ref} from "vue";
import {userStorei} from "@/stores/user_store";
import {Message} from "@arco-design/web-vue";
import {showLogin} from "@/components/web/f_login";
const store= userStorei()
const route = useRoute()
const router = useRouter()

function goRoute(name: string){
  router.push({name: name})
}
const visible = ref(false)


function showModal(){
  if (!store.isLogin){
    Message.warning("需要登陆")
    showLogin()
    return

  }
  visible.value = true
}
</script>

<template>
  <div class="square_base_view">
    <f_banner></f_banner>
    <f_ai_role_create v-model:visible="visible" type="user"></f_ai_role_create>
    <div class="menu">
      <a-button type="outline" @click="goRoute('square')" v-if="route.name === 'myRole'">角色广场</a-button>
      <a-button type="outline" @click="goRoute('myRole')" v-if="route.name === 'square'">我的角色</a-button>
      <a-button type="primary" @click="showModal">添加角色</a-button>
    </div>
    <div class="container">
      <router-view></router-view>
    </div>
  </div>

</template>

<style lang="less">
.square_base_view{
  .menu{
    display: flex;
    justify-content: center;
    margin: 20px 0;
    button:last-child{
      margin-left: 20px;
    }
  }
}
</style>